<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>大数据可视化</title>
  <link rel="stylesheet" href="css/index.css">
</head>
<!--头部的盒子-->
<header>
  <h1>大数据可视化——职位分析项目</h1>
  <div class="showTime"></div>
  <script>
    var t = null;
    t = setTimeout(time, 1000);   //开始运行
    function time() {
      clearTimeout(t); //清楚计时器
      dt = new Date()
      var y = dt.getFullYear();
      var mt = dt.getMonth() + 1;
      var day = dt.getDate();
      var h = dt.getHours();
      var m = dt.getMinutes();
      var s = dt.getSeconds();
      document.querySelector(".showTime").innerHTML = "当前时间：" + y + '年' + mt + '月' + day + '日 ' + h + '时' + m + '分' + s + '秒'
    }
  </script>
</header>
<body>
<selection class="mainbox">
  <div class="column">
    <div class="panel bar">
      <h2>柱形图-就业行情</h2>
      <div class="chart"></div>
      <div class="panel-footer"></div>
    </div>
    <div class="panel line">
      <h2>折线图-就业行业
        <a href="javascript:;">2022</a>
        <a href="javascript:;">2023</a>
      </h2>
      <div class="chart"></div>
      <div class="panel-footer"></div>
    </div>
    <div class="panel pie">
      <h2>薪资分布</h2>
      <div class="chart"></div>
      <div class="panel-footer"></div>
    </div>
  </div>
  <div class="column">
    <!--数字模块-->
    <div class="no">
      <div class="no-hd">
        <ul>
          <li>1693798</li>
          <li>1329646</li>
        </ul>
      </div>
      <div class="no-bd">
        <ul>
          <li>累计职位数</li>
          <li>当前有效职位数</li>
        </ul>
      </div>
    </div>
    <div class="map">
      <div class="map1"></div>
      <div class="map2"></div>
      <div class="map3"></div>
      <div class="echart">地图模块</div>
    </div>
  </div>
  <div class="column">
    <div class="panel bar2">
      <!--            111111111111111111111111111111111111111111111-->
      <h2>柱形图-就业行情</h2>
      <div class="chart"></div>
      <div class="panel-footer"></div>
    </div>
    <div class="panel line2">
      <h2>折线图-就业行</h2>
      <div class="chart"></div>
      <div class="panel-footer"></div>
    </div>
    <div class="panel pie2">
      <h2>饼图-就业行业</h2>
      <div class="chart"></div>
      <div class="panel-footer"></div>
    </div>
  </div>
</selection>
<script src="js/flexible.js"></script>
<script src="js/echarts.min.js"></script>
<script src="js/jquery.js"></script>
<script src="js/china.js"></script>
<script src="js/index.js"></script>


<!-- <script src="js/jquery.js"></script> -->
<!-- 引入china.js是因为中国地图需要 -->
<!-- <script src="js/china.js"></script> -->
</body>
</html>